<template>
	<view class="content">
		<!--房间详细信息-->
		<view class="content_1">
			<view class="sign_detail">
				<view class="detail_title">房间名称</view>
				<input class="detail_info" placeholder="请输入房间名称" style="direction: rtl;" @input="getNameInput"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">设置收租日</view>
				<input class="detail_info" placeholder="请输入收租日" type="number" maxlength="2" style="direction: rtl;" @input="getDayInput"></input>
			</view>
			<!-- <picker class="sign_detail" @change="pickerChange($event,'takemoney')" :value="data.takemoney" :range="takemoneyList"
			 range-key="show_name">
				<view class="detail_title" style="width: 660upx;">{{takemoneyList[data.takemoney].show_name}}</view>
				<image class="detail_icon" src="../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker> -->
			<view class="sign_detail">
				<view class="detail_title">开启/关闭房间</view>
				<switch color="#00E266" @change="changeSwitch" :checked='switchcheck'></switch>
			</view>
		</view>
		<!--保存-->
		<view class="content_2" @click="newRoom">
			保存
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				is_enable: '',
				switchcheck: 'true',
				house_id: '',
				// data: {
				// 	takemoney: 0,
				// },
				// takemoneyList: [
				// 	{id: '1', show_name: '设置收租日'},
				// 	{id: '2', show_name: '每月1号'},
				// 	{id: '3', show_name: '每月15号'},
				// 	{id: '4', show_name: '每月30号'}
				// ]
			}
		},
		methods: {
			//获取用户输入信息
			getNameInput: function(e) {
				this.inputname = e.detail.value
			},
			getDayInput: function(e) {
				this.inputday = e.detail.value
			},
			// //picker选择改变
			// pickerChange: function(e, val) {
			// 	this.data[val] = e.target.value
			// 	// this.rent_id = this.renttimeList[e.target.value].id
			// 	// this.way_id = this.payforList[e.target.value].id
			// },
			//switch选择状态
			changeSwitch: function(e) {
				// console.log(e.detail.value)
				if (e.detail.value == true) {
					this.is_enable = 2
					console.log(this.is_enable)
				} else if (e.detail.value == false) {
					this.is_enable = 1
					console.log(this.is_enable)
				}
			},
			//保存创建房间
			newRoom: function() {
				if (this.inputname == '' || this.inputname == null) {
					uni.showToast({
						title: '请输入房间名称',
						icon: 'none',
						position: 'center'
					})
				} else if (this.inputday == '' || this.inputday == null) {
					uni.showToast({
						title: '请输入收租日',
						icon: 'none',
						position: 'center'
					})
				} else if (this.inputday > '31') {
					uni.showToast({
						title: '请正确输入收租日',
						icon: 'none',
						position: 'center'
					})
				} else {
					new Request('landboos/Create_Room/CreateRoom').request(
						()=>{
							return 'POST'
						},
						()=>{
							return {
								openid: getApp().globalData.openid,
								house_id: this.house_id,
								is_enable: this.is_enable,
								show_name: this.inputname,
								day: this.inputday
							}
						},
						(res)=>{
							if (res.data.code == 1) {
								uni.navigateBack({
									delta: 2,
									success: (res) => {
										uni.showToast({
											title: '创建房间成功',
											icon: 'success',
											position: 'center'
										})
									}
								})
							} else {
								uni.showToast({
									title: '整租无法创建多房间',
									icon: 'none',
									position: 'center'
								})
							}
						}
					)
				}
			}
		},
		onLoad(option) {
			this.house_id = option.house_id
			if (this.switchcheck == 'true') {
				this.is_enable = 2
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	/*
		房间详细信息样式
	*/
	.content_1 {}

	.title_2 {
		height: 88upx;
		background-color: #B3E9DC;
		line-height: 88upx;
		padding-left: 28upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.sign_detail {
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 28upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.detail_info {
		height: 37upx;
		line-height: 37upx;
		font-size: 28upx;
		color: #999999;
	}

	.detail_icon {
		width: 40upx;
		height: 40upx;
		transform: rotate(180deg);
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	/*
		保存样式
	*/
	.content_2 {
		height: 72upx;
		width: 750upx;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		background-color: #63D0D5;
		position: fixed;
		z-index: 999;
		bottom: 0upx;
		left: 0upx;
	}
</style>
